<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 1;
            margin-bottom: 100px;
        }
    </style>

</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        var divArray = document.getElementsByTagName('div');
        for(var i = 0; i < divArray.length; i ++) {
            divArray[i].onmouseenter = function() {
                startMove(this, 400);
            }
            divArray[i].onmouseleave = function() {
                startMove(this, 100);
            }
        }

        function getStyle(dom, prop) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[prop];
            }else{
                return dom.currentStyle[prop];
            }
        }


        function startMove(dom, target) {
            clearInterval(dom.timer);
            var speed = null, cur = null;
            dom.timer = setInterval(function(){
                cur = parseInt(getStyle(dom, 'width'));
                speed = (target - cur) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // 负数的向上取整是 -1.9 --> -1
                // Math.floor(-1.9) --> -2
                if(cur == target) {
                    clearInterval(dom.timer);
                }else{
                    dom.style.width = cur + speed + 'px'; 
                }
            }, 30);
        }


    </script>
</body>
</html>